<template>
  <div class="app-container">
    <el-card style="width: 100%">
      <table-list
        ref="tableList"
        :fields="tableDataColumn"
        :pagination="true"
        :searchFunc="getProductSupplierStatistics"
        :searchDefault="searchConditions"
        border></table-list>
    </el-card>
  </div>
</template>
<script>
import { getProductSupplierStatistics, getSupplierList } from '@/api/user';
import { getList as getProductList } from '@/api/product';
import TableList from '@/components/TableList/index';
export default {
  name: 'customer',
  props: {
    productIds: {
      type: [Array],
      default: ()=>{
        return []
      },
    },
  },
  components: {
    TableList,
  },
  computed:{
    searchConditions(){
      return {
        product_id: ['in', this.productIds],
      }
    }
  },
  data() {
    return {
      getProductSupplierStatistics,
      getProductList,
      getSupplierList,
      tableDataColumn:[
        {
          prop: 'id',
          searchName: 'id',
          label: 'ID',
          minWidth: '60',
          searchType: 'input',
          exact: true,
        },
        {
          prop: 'supplier.name',
          searchName: 'supplier_id',
          label: '供应商',
          minWidth: '120',
          searchType: 'remoteSelect',
          searchAction: getSupplierList,
          searchKey: 'id',
          searchLabel: 'name',
          exact: true,
        },
        {
          prop: 'product.product_search_field',
          searchName: 'product_id',
          label: '产品名称',
          minWidth: '180',
          searchType: 'remoteSelect',
          searchAction: getProductList,
          searchKey: 'id',
          searchLabel: 'product_search_field',
          exact: true,
        },
        {
          prop: 'product_label',
          searchName: 'product_label',
          label: '产品标签',
          minWidth: '120',
          searchType: 'input',
        },
        {
          prop: 'request_number',
          searchName: 'request_number',
          label: '请求数量',
          minWidth: '100',
          searchType: 'input',
          exact: true,
          showSummary: true
        },
        {
          prop: 'charge_number',
          searchName: 'charge_number',
          label: '计费数量',
          minWidth: '100',
          searchType: 'input',
          exact: true,
          showSummary: true
        },
        {
          prop: 'date',
          searchName: 'date',
          label: '日期',
          minWidth: '100',
          searchType: 'date',
        },
        {
          prop: 'created_at',
          searchName: 'created_at',
          label: '创建时间',
          minWidth: '180',
          searchType: 'dateTime',
        },
      ]
    };
  },
};
</script>
